<script setup lang="ts">
import { usePermissionStore } from '../store/permission'
import { useRoute, useRouter } from 'vue-router'
import { TagView } from '../store/permission' // 导入类型

const route = useRoute()
const router = useRouter()
const permissionStore = usePermissionStore()

// 当前激活标签
const isActive = (tag: TagView) => {
    return tag.path === route.path
}
const isHome = (tag: TagView) => {
    return tag.title === '首页'
}

// 关闭标签
const closeSelectedTag = (tag: TagView) => {
    permissionStore.delVisitedView(tag.path!)
    if (isActive(tag)) {
        const latestView = permissionStore.visitedViews.slice(-1)[0]
        if (latestView) {
            router.push(latestView.fullPath || '/')
        } else {
            router.push('/')
        }
    }
}

// 标签操作
const handleCommand = (command: string) => {
    if (command === 'closeOthers') {
        permissionStore.visitedViews = permissionStore.visitedViews.filter(
            v => v.path === route.path || v.meta?.affix
        )
    } else if (command === 'closeAll') {
        // 保留首页和其他固定标签
        /*
        permissionStore.visitedViews = permissionStore.visitedViews.filter(
            v => v.meta?.affix || v.title === '首页'
        )*/
        permissionStore.clearAllExceptAffix()
        if (route.path !== '/home') router.push('/home')
    }
}
</script>
<!-- src/layout/components/TagsView.vue -->
<template>
    <div class="tags-container">
        <el-scrollbar class="tags-wrap">
            <router-link v-for="tag in permissionStore.visitedViews" :key="tag.path" :to="{ path: tag.path }"
                class="tags-item" :class="isActive(tag) ? 'active' : ''">
                {{ tag.title }}
                <el-icon v-if="!isHome(tag)" @click.prevent.stop="closeSelectedTag(tag)">
                    <Close />
                </el-icon>
            </router-link>
        </el-scrollbar>

        <div class="tags-right">
            <el-dropdown @command="handleCommand" trigger="click">
                <el-button type="primary" link >
                    标签操作<el-icon><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
                        <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>


<style scoped>
.tags-container {
    display: flex;
    background: #fff;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid #d8dce5;

    .tags-wrap {
        flex: 1;
        overflow-x: auto;
        white-space: nowrap;
        padding: 5px 10px;

        .tags-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 20px;
            margin-right: 5px;
            border-radius: 3px;
            font-size: 12px;
            color: #495060;
            border: 1px solid #e9eaec;
            position: relative;
            width: auto;

            .el-icon {
                font-size: 12px;
                display: inline-flex;
                align-items: center;
                transform-origin: center left;
                /* 从左侧中心开始缩放 */


            }

            .el-icon:hover {
                color: #f56c6c;
                transform: scale(1.5) rotate(10deg);
                color: #ff0000;
            }

            &:hover {
                background: #f8f8f9;
            }

            &.active {
                background-color: var(--el-color-primary);
                color: #fff;
                border-color: var(--el-color-primary);
            }
        }
    }

    .tags-right {
        width: 120px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #d8dce5;
        width: auto;
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
  .tags-container {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
  }
  .tags-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 0;
  }
  .tags-item {
    display: inline-flex;
    margin-bottom: 0;
    margin-right: 6px;
    width: auto;
    min-width: 90px;
    max-width: 100%;
  }
  .tags-right {
    flex: 0 0 auto;
    width: auto;
    margin-left: 8px;
    border-left: none;
    border-top: none;
    margin-top: 0;
    position: static;
    white-space: nowrap;
  }
}
</style>